<template>
    <div>
        姓名：<el-input v-model="input" style="width: 520px" placeholder="请输入名字" />
    </div> 
    <div class="mb-2 flex items-center text-sm">
        性别：
    <el-radio-group v-model="radio1" class="ml-4">
      <el-radio value="1" size="large">男</el-radio>
      <el-radio value="2" size="large">女</el-radio>
    </el-radio-group>
  </div>
  <div>
   爱好： 
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="吃" value="Value A" />
    <el-checkbox label="喝" value="Value B" />
    <el-checkbox label="玩" value="Value C" />
    <el-checkbox label="乐" value="Value D" />
  </el-checkbox-group>
  </div>
  <div>自我介绍：
  <el-input
    v-model="textarea"
    style="width: 520px"
    :rows="8"
    type="textarea"
    placeholder="自我介绍"
  />
  </div>
  <div class="mb-4">
    <el-button type="primary" @click="warn">提交</el-button>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const radio1 = ref('1')
const input = ref('')
const checkList = ref(['Value selected and disabled', 'Value A'])
const textarea = ref('')
function warn() {
  // 这里可以访问原生事件
  
  alert("哈哈，你被骗了！！")
}

</script>